﻿<!DOCTYPE html>
<html>
<head>
    <title>Knockout JS - with Templates</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <h2>Knockout JS - with Templates</h2>
    <div id="personContainer" data-bind="template: 'personTmpl'"></div>

    <script type="text/javascript">
        var vm = {
            person: {
                firstName: ko.observable("John"),
                lastName: ko.observable("Papa")
            }
        };

        $(document).ready(function () {
            ko.applyBindings(vm);
        });
    </script>
    <script id="personTmpl" type="text/x-jquery-tmpl">
        <div>
            First Name: <input data-bind="value: person.firstName" /><br />
            Last Name: <input data-bind="value: person.lastName" /><br />
            Full Name is
            <span data-bind="text: person.firstName"></span>
            <span data-bind="text: person.lastName"></span>
        </div>
    </script>
</body>
</html>
